<template>
    <div>
        <div class="baifang">
            <van-icon name="arrow-left" @click="$router.go(-1)"/>
            <h1>新增拜访信息</h1>
            <van-icon name="wap-home-o" />
        </div>
        <div class="biaodan">
            <ul>
                <li @click="$router.push('/selectthecustomer')">
                    <span>客户名称</span> <input type="text" v-model="kehu">
                </li>
                  <li>
                    <span>拜访标题</span><input type="text" v-model="visitTitle">
                </li>
                  <li  @click="showPicker = true">
                    <span>拜访原因</span><input type="text" v-model="visitReason">
                </li>
                 <li @click="bol">
                    <span>拜访时间</span><input type="text" v-model="visitTime">
                
                </li>
            </ul>
        </div>
        <div class="shouji">
            <span>
                拜访地址
            </span>
            <textarea v-model="visitAddress">请输入</textarea>
        </div>
         <div  class="shouji">
            <span>
                拜访情况
            </span>
            <textarea v-model="visitSituation">请输入</textarea>
        </div>
         <div  class="shouji">
            <span>
                竞争信息收集情况
            </span>
            <textarea v-model="collectSituation">请输入</textarea>
        </div>
        <div class="baocun" @click="tijo">
            <span>保存</span>
        </div>
            <van-datetime-picker
  v-model="currentDate"
  type="datehour"
  title="选择年月日小时"
  :min-date="minDate"
  :max-date="maxDate"
  v-show="bool"
  @confirm="pp"
/>

<van-popup v-model="showPicker" round position="bottom">
  <van-picker
    show-toolbar
    
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
  />
</van-popup>
    </div>
    
</template>

<script>
// import {GetViSitDate} from "@/request/pp.js"
import {GetViSitDate} from "@/request/api"

export default {
    name:'Newvisitinformation',
    data () {
        return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
        bool:false,
        visitTime:'',
        kehu:"下拉选择",
         visitReason: '',
      showPicker: false,
      visitSituation:'',
      visitTitle:'',
      collectSituation:'',
      visitAddress:'',
      columns: ['例行走访','售中支持','售前支持'],
        }
    },
    methods:{
        tijo(){
            GetViSitDate({
               custId:this.$route.params.id,
              // custName:this.kehu,
               visitTime:this.visitTime,
               visitAddress:this.visitAddress,
               visitTitle:this.visitTitle,
               visitReason:this.visitReason,
               visitSituation:this.visitSituation,
               collectSituation:this.collectSituation,
             }).then((res)=>{
                 console.log("新增客户拜访数据:",res);
             })
        },
        bol(){
            // this.bool=true
        },
        pp(value){
             this.bool=false
            console.log(value);
            this.shijia=value
        },
        onConfirm(value) {
      this.visitReason = value;
      this.showPicker = false;
    },
    },
    created(){
      
       this.kehu=this.$route.params.name
    }
}
</script>
 
<style lang = "less" scoped>
.van-picker{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
    .baifang{
        height: .5rem;
        line-height: .5rem;
        color: white;
        background: #0a3399;
        font-size: .14rem;
        display: flex;
        align-items: center;
        padding: 0 .15rem;
        h1{
            flex: 1;
            text-align: center;
        }

    }
    .biaodan{
        font-size: .15rem;
        background: #fff;
        padding:  0 .15rem;
        ul{
            li{
                height: .5rem;
                line-height: .5rem;
                border-top: 1px solid #e5e5e5;
                strong{
                    margin-left: .45rem;
                    color: #ccc;
                }
                input{
                    border: none;
                  height: .4rem;
                  margin: 0 .15rem;
                }
            }
        }
    }
    .shouji{
      
        font-size: 0.14rem;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    margin-top: .15rem;
    height: 1.2rem;
    display: flex;
    padding: .15rem;
        textarea{
            border: none;
            height: 1rem;
            flex: 1;
            color: #d0d0d0;
        }
        
    }
    .baocun{
        background: #fff;
    /* padding: .15rem 0; */
    height: .6rem;
    /* line-height: .6rem; */
    display: flex;
        span{
            display: block;
            width: 3.6rem;
            height: .4rem;
            background:#cde7ff ;
            line-height: .4rem;
            font-size: .14rem;
            margin: 0 auto;
            text-align: center;
            border-radius: .2rem;
            margin: .10rem 0;
           
        }
    }
</style>